<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>黔东南州民爆行业公共服务平台</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta name="keywords" content="网站关键字1,网站关键字2,网站关键字3,网站关键字4,网站关键字5">
	    <meta name="description" content="本网站简介">
	    <link rel="shortcut icon" href="../static/images/favicon.ico">
		<link rel="stylesheet" href="../static/js/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="../static/css/global.css" />
		<link rel="stylesheet" href="../static/css/layout.css" />
		
		
		<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kx0ZqRGusckdkCjO1NQxi4qsQjEVlwXc"></script>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

	
<style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#333;
    }
    #map{
        width:100%;
        height:100%;
    }
    #panel {
        position: absolute;
        top:30px;
        left:10px;
        z-index: 999;
        color: #fff;
    }
    #login{
        position:absolute;
        width:300px;
        height:40px;
        left:50%;
        top:50%;
        margin:-40px 0 0 -150px;
    }
    #login input[type=password]{
        width:200px;
        height:30px;
        padding:3px;
        line-height:30px;
        border:1px solid #000;
    }
    #login input[type=submit]{
        width:80px;
        height:38px;
        display:inline-block;
        line-height:38px;
    }
	</style>
	
</head>

	
	<body style="position: relative;height: 100vh;">
		<div class="sidebar">
			<ul>
				<li class="current"><a href="#"><i class="layui-icon layui-icon-home"></i><p>首页</p></a></li>
				<li><a href="#"><i class="layui-icon layui-icon-set"></i><p>安全监管</p></a></li>
				<li><a href="#"><i class="layui-icon layui-icon-video"></i><p>现场视频</p></a></li>
			</ul>
		</div>
		<div class="fly-header clearBoth pl-20 pr-20" style="opacity: .8;height: 50px;">
			<a href="logo.html" class="logo fl" style="line-height: 50px;">
				<img src="../static/images/nationalEmblem.png" style="width: 30px;">
				<span style="font-size: 20px;">黔东南州民爆行业公共服务云平台</span>
			</a>
			<div class="fr fly-header-msg" style="top: 16px;right: 170px;">
				<span>2018-11-11<span>星期天</span></span>
				<span>多云：<span>微风0级</span><span>22℃</span></span>
				<span>本月登录：<span>12次</span></span>
				<span>本月登录时长：<span>20小时</span></span>
			</div>
			<ul class="loginbar login-info" style="top: 9px;line-height: 30px;">
                <li id="userInfoBox" class="layui-nav-item userNameBox">
                    <a href="#"><img src="../static/images/index/Homepage-onthedayofconstructionpersonnel.png" style="width: 30px;height: 30px;" /></a>
                </li>
                <li id="logoutBtn" class="extBtn" data-toggle="logout">
                    <a href="javascript: void(0);">退出登录</a>
                </li>
            </ul>
            <ul class="loginbar islogin layui-hide" style="top: 9px;line-height: 30px;">
                <li id="loginBtn" data-toggle="login" class="layui-nav-item login-btn" type="login">
                    <a href="javascript:;">登陆</a>
                </li>
                <li id="regBtn" class="layui-nav-item login-btn" type="reg">
                	<a href="http://qaaccount.915dj.com/reg/person">注册</a>
                </li>
            </ul>
		</div>
		<!-- 顶部筛选和搜索 -->
		<div class="filter-bar mb-30 clearBoth" style="position: absolute;top: 60px; left: 90px; right: 10px; width: inherit; z-index: 122;">
			<div class="title">选择图层：</div>
			<div class="filter-scroll">
				<div class="filter-item-box">
					<a class="filter-item " href="bigData.html">
						<span><span>首页</span></span>
					</a>
					<a class="filter-item current" >
						<span><span>爆破项目</span></span>
					</a>
					<a class="filter-item" href="Location.html">
						<span><span>民爆库房</span></span>
					</a>
					<a class="filter-item" href="Location.html">
						<span><span>工程技术人员</span></span>
					</a>
					<a class="filter-item" href="Location.html">
						<span><span>爆破员</span></span>
					</a>
					<a class="filter-item" href="Location.html">
						<span><span>安全员</span></span>
					</a>
					<a class="filter-item" href="Location.html">
						<span><span>保管员</span></span>
					</a>
					<a class="filter-item" href="Location.html">
						<span><span>危险地图</span></span>
					</a>
				</div>
			</div>
			<div class="search-box">
				<img src="../static/images/tongji1-sousuoanniu.png" />
				<input type="text" placeholder="输入关键字搜索" class="layui-input" />
			</div>
			<div id="rs-result" style="margin-right: -20px;margin-top:0px;">
				<div class="optionpanel">
				<label style="color:#fff">主题</label>
				<select id="stylelist" onchange="changeMapStyle(this.value)"></select>
				</div>
			</div>
		</div>
	<!-- 	<div class="wrapper" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
			<div class="location-box">
				<div id="location-map"></div>
			</div>
		</div> -->

    <div id="map"></div>
    <script type="text/javascript">
		var map = new BMap.Map("map", {});                        // 创建Map实例
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);     // 初始化地图,设置中心点坐标和地图级别
		map.enableScrollWheelZoom();                            //启用滚轮放大缩小
		if (document.createElement('canvas').getContext) {
			var  mapStyle ={ 
					features: ["road", "building","water","land"],//隐藏地图上的poi
					style : "dark"  //设置地图风格为高端黑
				}
			map.setMapStyle(mapStyle);

			var BW            = 0,    //canvas width
				BH            = 0,    //canvas height
				ctx           = null,
				stars         = [],   //存储所有星星对象的数组
				timer         = null, //定时器
				timeLine      = null, //时间轴对象
				rs            = [],   //最新的结果
				isNowTimeData = false, //是否显示当前时间的定位情况
				py            = null, //偏移
				gridWidth     = 10000,//网格的大小
				isOverlay     = false,//是否叠加
				//gridWidth   = 1,//网格的大小
				canvas        = null; //偏移

			function Star(options){
				this.init(options);
			}

			Star.prototype.init = function(options) {
				this.x   = ~~(options.x);
				this.y   = ~~(options.y);
				this.initSize(options.size);
				if (~~(0.5 + Math.random() * 7) == 1) {
					this.size = 0;
				} else {
					this.size = this.maxSize;
				}
			}

			Star.prototype.initSize = function(size) {
				var size = ~~(size);
				this.maxSize = size > 6 ? 6 : size;
			}

			Star.prototype.render = function(i) {
					var p = this;

					if(p.x < 0 || p.y <0 || p.x > BW || p.y > BH) {
						return;
					}

					ctx.beginPath();
					var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
					gradient.addColorStop(0, "rgba(7,120,249,1)");
					gradient.addColorStop(1, "rgba(7,120,249,0.3)");
					ctx.fillStyle = gradient;
					ctx.arc(p.x, p.y, p.size, Math.PI*2, false);
					ctx.fill();
					if (~~(0.5 + Math.random() * 7) == 1) {
						p.size = 0;
					} else {
						p.size = p.maxSize;
					}
			}

			function render(){
				renderAction();
				setTimeout(render, 180);
			}

			function renderAction() {
				ctx.clearRect(0, 0, BW, BH);
				ctx.globalCompositeOperation = "lighter";
				for(var i = 0, len = stars.length; i < len; ++i){
					if (stars[i]) {
						stars[i].render(i);
					}
				}
			}


			// 复杂的自定义覆盖物
			function ComplexCustomOverlay(point){
			  this._point = point;
			}
			ComplexCustomOverlay.prototype = new BMap.Overlay();
			ComplexCustomOverlay.prototype.initialize = function(map){
			  this._map = map;
			  canvas = this.canvas = document.createElement("canvas");
			  canvas.style.cssText = "position:absolute;left:0;top:0;";
			  ctx = canvas.getContext("2d");
			  var size = map.getSize();
			  canvas.width = BW = size.width;
			  canvas.height = BH = size.height;
			  map.getPanes().labelPane.appendChild(canvas);
			  //map.getContainer().appendChild(canvas);
			  return this.canvas;
			}
			ComplexCustomOverlay.prototype.draw = function(){
				var map = this._map;
				var bounds = map.getBounds();
				var sw = bounds.getSouthWest();
				var ne = bounds.getNorthEast();
				var pixel = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat));
				py = pixel;
				if (rs.length > 0) {
					showStars(rs);
				}
			}
			var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101));
			map.addOverlay(myCompOverlay);

			var project = map.getMapType().getProjection();
			var bounds = map.getBounds();
			var sw = bounds.getSouthWest();
			var ne = bounds.getNorthEast();
			sw = project.lngLatToPoint(new BMap.Point(sw.lng, sw.lat));
			ne = project.lngLatToPoint(new BMap.Point(ne.lng, ne.lat));

			//左上角墨卡托坐标点
			var original = {
				x : sw.x,
				y : ne.y
			}

			/**
			 * 请求定位数据,并在地图上绘制出
			 * @param 请求的时间
			 * @param 成功后执行的回调函数
			 * 
			 */
			var requestMgr = {
				request: function (time, successCbk) {
					if (document.location.host === 'developer.baidu.com') {
						var url = "http://lbsyun.baidu.com/jsdemo/data/data";
					} else {
						var url = "../data/data";
					}
					
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange = function() {
						if( xhr.readyState == 4  && xhr.status == 200 ) {
							if (!isOverlay) {
								rs = JSON.parse(xhr.responseText);
							} else {
								rs = rs.concat(JSON.parse(xhr.responseText));
								if (rs.length > 10000) {
									rs.splice(0, rs.length - 10000);
								}
							}
							showStars(rs);
							if (successCbk) {
								successCbk();
							}
						}
					}
					xhr.open( "GET", url, true );
					xhr.send( null );
				}
			}

			//显示星星
			function showStars(rs) {
				stars.length = 0;
				var temp = {};
				for (var i = 0, len = rs.length; i < len; i++) {
					var item = rs[i];
					var addNum = gridWidth / 2;
					var x = item[0] * gridWidth + addNum;
					var y = item[1] * gridWidth + addNum;
					var point = project.pointToLngLat(new BMap.Pixel(x, y));
					var px = map.pointToOverlayPixel(point);
						//create all stars
						var s = new Star({
							x: px.x - py.x, 
							y: px.y - py.y,
							size: item[2]
						});
						stars.push(s);
					//}
				}
				canvas.style.left = py.x + "px";
				canvas.style.top = py.y + "px";
				renderAction();
			}

			render();

			function nowTimeCbk (time) {
				requestMgr.request(time, function(){
					if (isNowTimeData) {
						setTimeout(function(){
							if (isNowTimeData) {
								startCbk(nowTimeCbk);
							}
						}, 1000);
					}
				});
			}
			function startCbk(cbk){
				var now = new Date();
				var time = {
					hour   : now.getHours(),
					minute : now.getMinutes(),
					second : now.getSeconds()
				};
				if (cbk) {
					cbk(time);
				}
			};
			startCbk(nowTimeCbk);
		} else {
			alert('请在chrome、safari、IE8+以上浏览器查看本示例');
		}
	</script>
</body>
</html>
